﻿
<div class="content-wrapper">
    <section class="content-header">
        <h1>
            报警查看
            <small>报警记录</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
            <li><a href="#">报警查看</a></li>
            <li class="active">报警记录</li>
        </ol>
    </section>
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-body">
                        <div class="input-group" style="display:none">
                            <span class="input-group-addon">日期范围</span>
                            <input type="text" v-model="datemin" ref="datemin" id="datemin" class="form-control" style="width:120px;">
                            <input type="text" v-model="datemax" ref="datemax" id="datemax" class="form-control" style="width:120px;">
                        </div>
                        <div class="pull-right" style="padding:10px">
                            <a class="btn btn-primary" href="/DeviceAlarmHistory/Index"><i class="fa fa-undo"></i>返回</a>
                        </div>
                        <input type="hidden" ref="HistoryId" id="HistoryId" value="@ViewBag.HistoryId" />
                        <table id="bootstraptable" class="table table-bordered text-nowrap table-hover"></table>
                        <table id="bootstraptableDetail" class="table table-bordered text-nowrap table-hover"></table>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
@section styles{
    <style>
        .fixed-table-pagination .pagination-detail, .fixed-table-pagination div.pagination {
            display: none
        }
    </style>

}
@section scripts{
    <script type="text/javascript">


        var app = new Vue({
            el: '#app',
            data: {
                datemin: '',
                datemax: '',
                HistoryId: ''
            },
            mounted: function () {
                var _self = this;
                _self.$nextTick(function () {
                    //显示active
                    _self.$refs.DeviceAlarmHistory.parentNode.parentNode.classList.add("active");
                    _self.$refs.DeviceAlarmHistory.classList.add("active");

                    _self.datemin = _self.getCurrentMonthFirst();
                    _self.datemax = _self.getCurrentMonthLast();
                    $('#datemin').datetimepicker({
                        format: 'yyyy-mm-dd',
                        minView: 2,
                        autoclose: true,
                        language: "zh-CN"
                    });
                    $('#datemax').datetimepicker({
                        format: 'yyyy-mm-dd',
                        minView: 2,
                        autoclose: true,
                        language: "zh-CN"
                    });
                    setTimeout(function () {
                        _self.loadL();
                        setDataCardView("#bootstraptable");
                        setDataCardView("#bootstraptableDetail");
                        //$("div[class='pull-right search']")[0].children[0].setAttribute("placeholder", "设备名称");
                    }, 500);
                });
            },
            methods: {
                loadL: function () {
                    _self = this;

                    var obj = [{
                        field: 'AlarmInfo',
                        align: 'left',
                        formatter: function (value, row, index) {
                            var end_time = "";
                            var confirm_time = "";
                            if (row.ConfirmTime == null) {
                                confirm_time = "";
                            }
                            else {
                                confirm_time = _self.jsonDateFormat(row.ConfirmTime);
                            }
                            if (row.EndTime == null) {
                                end_time = "";
                            }
                            else {
                                end_time = _self.jsonDateFormat(row.EndTime);
                            }
                            if (row.ConfirmInfo == null) {
                                row.ConfirmInfo = "";
                            }
                            if (row.ConfirmPerson == null) {
                                row.ConfirmPerson = "";
                            }

                            var columnOne = "<tr><td>设备：</td><td>" + row.ClientName + " / " + row.DeviceName + "</td><td></td><td></td></tr>";
                            var columnTwo = "<tr><td>发生时间：</td><td>" + _self.jsonDateFormat(row.CreateDate) + "</td><td>恢复时间：</td><td>" + end_time + "</td></tr>";
                            var columnThree = "<tr><td>报警内容：</td><td colspan='3' style='color:#ff8100;font-weight:bold'>" + row.AlarmDetail + "</tr>";
                            var columnFour = "<tr><td>确认时间：</td><td>" + confirm_time + "</td><td>确认人：</td><td>" + row.ConfirmPerson + "</td></span>";
                            var columnFive = "<tr><td>确认内容：</td><td>" + row.ConfirmInfo + "</td></tr>";
                            return columnOne + columnTwo + columnThree + columnFour + columnFive;
                        }
                    }];
                    _self.HistoryId = _self.$refs.HistoryId.value;
                    yui.tableMiniMini("bootstraptable", "/DeviceAlarmHistory/DetailsList?HistoryId=" + _self.HistoryId + "", obj, "POST", "HistoryId");

                    var objDetail = [{
                        field: 'CreateDate',
                        title: '上报时间',
                        valign: 'middle',
                        formatter: function (value, row, index) {
                            return _self.jsonDateFormat(value);
                        }
                    }, {
                        field: 'ParameterName',
                        align: 'left',
                        valign: 'middle',
                        title: '监测参数',
                        formatter: function (value, row, index) {
                            var para1 = "";
                            var para2 = "";
                            var para3 = "";
                            var para4 = "";

                            para1 = "label-warning";
                            para1 = '温度:<span class="label ' + para1 + '">温度报警;</span>&emsp;';

                            para2 = "label-success";
                            para2 = '湿度:<span class="label ' + para2 + '">' + row.ParameterValue2 + '%;</span>&emsp;';

                            para3 = "label-success";
                            para3 = '液位:<span class="label ' + para3 + '">' + row.ParameterValue3 + 'mm;</span>&emsp;';

                            para4 = "label-success";
                            para4 = '有毒有害:<span class="label ' + para4 + '">' + row.ParameterValue4 + 'ppm;</span>&emsp;';

                            return para1 + "&nbsp;" + para2 + "&nbsp;" + para3 + "&nbsp;" + para4 + "&nbsp;";
                        }
                    }, {
                        field: 'ParameterValue5',
                        align: 'center',
                        title: '摄像头截图',
                        sortable: true,
                        formatter: function (value, row, index) {
                            return "<img src='../image/1.jpg' style='width:200px;height:150px'/>";
                        }
                    }];
                    _self.HistoryId = _self.$refs.HistoryId.value;
                    yui.tableMini("bootstraptableDetail", "/DeviceAlarmHistory/DetailsList?HistoryId=" + _self.HistoryId + "", objDetail, "POST", "HistoryId");
                }
            }
        });
    </script>
}